<template>
  <page-layout title="雇员管理">
    <a-card>
      <!-- tabs -->
      <div class="radioGroup_div dsp_flex">
        <span style="margin-right: 10px;">状态: </span>
        <div>
          <a-radio-group v-model="radioValue" @change="radioOnChange">
            <a-radio-button v-for="item in employeeManagementTabArr" :value="item.id" :key="item.id" :class="item.tips != 0 ? '' : 'hide'">
              {{item.tab}}
            </a-radio-button>
          </a-radio-group>
        </div>
      </div>

      <!-- 搜索框 -->
      <div>
        <a-row>
          <a-col :span="24">
            <a-form :model="searchForm" ref="searchForm" :class="radioCurrentIdx == 'g' ? 'dsp_flex' : ''" layout="inline">
              <a-form-item label="关键字">
                <a-input allow-clear placeholder="姓名/手机号/身份证号" v-model="searchForm.nameTeldepartmentVal" />
              </a-form-item>
              <a-form-item label="项目名称">
                <a-select show-search allowClear v-model="searchForm.corpProNameVal" placeholder="请选择项目名称" option-filter-prop="children" :filter-option="filterOption" @change="handleChange1" style="width: 202.5px;">
                  <a-select-option v-for="(item,index) in selectData" :key="index" :value="item.id" :data="item">
                    {{item.name}}
                  </a-select-option>
                </a-select>
              </a-form-item>

              <template v-if="radioCurrentIdx == 'g'">
                <a-form-item label="类型">
                  <a-select show-search allowClear placeholder="请选择类型" option-filter-prop="children" style="width: 202.5px;" :filter-option="filterOption" @change="UnusualHandleChange">
                    <a-select-option v-for="(item, index) in typeSelectArr" :key="index" :value="item.key">
                      {{item.val}}
                    </a-select-option>
                  </a-select>
                </a-form-item>
                <a-form-item label="日期">
                  <a-date-picker @change="UnusualOnChange" style="width: 202.5px;" />
                </a-form-item>

                <a-form-item>
                  <a-button type="primary" @click="searchBtnClkFn" icon="search">查询</a-button>
                </a-form-item>
              </template>

              <a-form-item v-if="radioCurrentIdx != 'g'">
                <a-button type="primary" @click="searchBtnClkFn" icon="search">查询</a-button>
              </a-form-item>
            </a-form>
          </a-col>

          <a-col :span="24" class="mtb_10">
            <a-space>
              <a-button type="primary" v-if="radioCurrentIdx == 'b'" icon="download" @click="batchImportBtnClk">批量导入</a-button>
              <a-button type="primary" @click="batchExportBtnClk" icon="upload" :loading="exportBtnLoading">批量导出</a-button>
              <a-select :value="batchOption" placeholder="批量操作" style="width: 120px" @change="batchHandleChange" v-if="radioCurrentIdx == 'c'" :loading="batchOptionLoading">
                <a-select-option value="1">
                  入职
                </a-select-option>
                <!-- <a-select-option value="2" disabled>
                  离职
                </a-select-option>
                <a-select-option value="3">
                  取消入职
                </a-select-option> -->
              </a-select>
            </a-space>
          </a-col>
        </a-row>
      </div>

      <!-- table -->
      <div class="table">
        <advance-table :columnsResetIsShow="false" :headerbarIsShow="false" :columns="columns" :data-source="tableData" title=" " :loading="loading" :row-selection="rowSelection" rowKey="id" @search="onSearch" @refresh="onRefresh" :format-conditions="true" @reset="onReset" :scroll="tableData.length > 0 ? {x: 1300} : undefined" :pagination="{
        current: pageNum,
        pageSize: pageSize,
        total: total,
        showSizeChanger: true,
        showLessItems: true,
        showQuickJumper: true,
        showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
        onChange: onPageChange,
        onShowSizeChange: onSizeChange,
      }">
          <template slot="name" slot-scope="text">
            <a-tooltip>
              <template slot="title">
                {{text.text}}
              </template>
              {{text.text ? text.text : '-' | nameFilter}}
            </a-tooltip>
          </template>
          <template slot="project" slot-scope="text">
            {{text.text ? text.text.name : '-'}}
          </template>
          <template slot="idCard" slot-scope="text">
            {{text.text ? text.text : '-'}}
          </template>
          <template slot="mobile" slot-scope="text">
            {{text.text ? text.text : '-'}}
          </template>

          <template slot="status" slot-scope="text">
            <a-tag :color="colorFilter(text.text)">
              {{text.text | statusFilter}}
            </a-tag>
          </template>

          <template slot="contractStatus" slot-scope="text">
            {{text.text | contractStatusFilter}}
          </template>
          <template slot="createTime" slot-scope="text">
            {{text.text | dateFormatFilter}}
          </template>
          <template slot="entryTime" slot-scope="text">
            {{text.text | dateFormatFilter}}
          </template>
          <template slot="updateTime" slot-scope="text">
            {{text.text | dateFormatFilter}}
          </template>
          <template slot="setting" slot-scope="text">
            <a @click="goDetails(text.record.id)">详情</a>
            <template v-if="radioCurrentIdx == 'c'">
              <a-divider type="vertical" />
              <a @click="entryJobClkFn(text.record.id)">入职</a>
            </template>
            <template v-if="radioCurrentIdx == 'c' || radioCurrentIdx == 'f' || radioCurrentIdx == 'd'">
              <a-divider type="vertical" />
              <a-popconfirm title="确定要取消入职吗?" ok-text="确定" cancel-text="取消" @confirm="cancelEntryJobClkFn(text.record.id)">
                <a :disabled="text.record.status == 'UnEntry' || text.record.status == 'Expired'">取消入职</a>
              </a-popconfirm>
            </template>
            <template v-if="radioCurrentIdx == 'd'">
              <a-divider type="vertical" />
              <a @click="quitPOsitionClkFn(text)">离职</a>
            </template>

          </template>
          <template slot="contract" slot-scope="text">
            {{text.text.signStartTime | dateFormatFilter}}
          </template>
          <template slot="setting1" slot-scope="text">
            <a-popconfirm title="确定要取消入职吗?" ok-text="确定" cancel-text="取消" @confirm="cancelEntryClkFn(text.record.id)">
              <a :disabled="text.record.status != 'OnJob'">取消入职</a>
            </a-popconfirm>
            <a-divider type="vertical" />
            <a @click="entryAgainClkFn(text.record.id)" :disabled="againEntryFn(text.record.contractStatus)">再次入职</a>
            <!-- 再次入职：签署失败，拒签，取消签署状态  可点
                取消入职：在职状态可点 -->
          </template>
        </advance-table>
      </div>

      <!-- 离职modal -->
      <a-modal title="离职办理" centered :visible="modalShow" :confirm-loading="confirmLoading" @ok="leaveModalHandleOk" @cancel="leaveModalHandleCancel">
        <a-form-model :model="leaveModalForm" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="modalRules" ref="leaveModalForm">
          <a-form-model-item label="离职员工">
            <span style="color: #BFBFBF;">{{leaveModalForm.name}}</span>
          </a-form-model-item>

          <a-form-model-item label="离职原因" prop="dimissionReason">
            <a-select show-search allowClear placeholder="请选择离职原因" v-model="leaveModalForm.dimissionReason" option-filter-prop="children" :style="setWidth" :filter-option="filterOption" @change="leaveModalSelectOnchange" :getPopupContainer="(triggerNode) => triggerNode.parentNode">
              <a-select-option v-for="(item, index) in leaveModalReasonData" :key="index" :value="item">
                {{item}}
              </a-select-option>
            </a-select>
          </a-form-model-item>

          <a-form-model-item label="离职日期" prop="dimissionDate">
            <a-date-picker @change="dimissionOnchange" v-model="leaveModalForm.dimissionDate" placeholder="请选择离职日期" :style="setWidth" format="YYYY-MM-DD" />
            <!-- :disabled-date="disabledDate" -->
          </a-form-model-item>

          <a-form-model-item label="社保停缴月份" prop="socialSecurityStopDate">
            <a-month-picker @change="socialSecurityStopDateOnchange" v-model="leaveModalForm.socialSecurityStopDate" placeholder="请选择社保停缴月份" format="YYYY-MM" :style="setWidth" />
          </a-form-model-item>

          <a-form-model-item label="公积金停缴月份" prop="accumulationFundStopDate">
            <a-month-picker @change="stopFundDateStopDateOnchange" v-model="leaveModalForm.accumulationFundStopDate" placeholder="请选择公积金停缴月份" format="YYYY-MM" :style="setWidth" />
          </a-form-model-item>

          <a-form-model-item label="内容描述" class="wordStatistics_wrapper">
            <a-textarea style="width: 220px;" placeholder="请输入内容" :maxLength="300" :auto-size="{ minRows: 2, maxRows: 6 }" v-model="leaveModalForm.cntDescVal" />
            <span class="wordStatistics">{{leaveModalForm.cntDescVal.length}}/300</span>
          </a-form-model-item>

          <a-col :span="7"></a-col>

          <a-checkbox @change="onChange" style="opacity: 0">
            是否发送离职协议
          </a-checkbox>
        </a-form-model>
      </a-modal>

      <!-- 详情drawer -->
      <detailDrawer class="employeeDetail_drawer" :title="'雇员详情'" @cancelDrawer="cancelDrawer" @getList="getList" :visible.sync="drawerVisibles">
        <employDetailCpt slot="content" :id="userId"></employDetailCpt>
      </detailDrawer>

      <a-modal class="staffModal" title="员工批量处理" :visible="visible" width="880px" :confirm-loading="staffBatchModalConfirmLoading" @ok="handleOk" @cancel="handleCancel" :footer="null">
        <staffBatchTmp />
      </a-modal>
    </a-card>
  </page-layout>
</template>

<script>
import AdvanceTable from '@/components/table/advance/AdvanceTable'
import detailDrawer from '@/pages/components/drawer'
import staffBatchTmp from '@/pages/components/batchProcessing/index'
import { employeeManageListApi, entryByPitchApi, batchCancelEntryApi, downloadApi, projectGetListApi, employeeDimissionApi } from '@/services/employeeManage'
import datas from "@/utils/data"
import { transferDate } from '@/utils/util'
import moment from 'moment'
import employDetailCpt from './employeeDetails'
import PageLayout from "@/layouts/PageLayout"
import { mapState, mapMutations } from 'vuex'
let ids = [] // 批量入职、取消入职传参

// 列复选框
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    // console.log(
    //   `selectedRowKeys: ${selectedRowKeys}`,
    //   "selectedRows: ",
    //   selectedRows
    // );        
    ids = selectedRowKeys.toString()
  },
  onSelect: (record, selected, selectedRows) => { },
  onSelectAll: (selected, selectedRows, changeRows) => { },
};

const statusArr = ['', 'Supplement', 'UnEntry', 'OnJob', 'UnDimission', 'Expired', '', 'Dimission']
// Supplement/待完善资料,UnEntry/待入职,OnJob/在职,UnDimission/待离职,Dimission/已离职(废弃)，Expired/已失效 

const letterToIndex = [
  {
    letter: 'a',
    index: 0
  },
  {
    letter: 'b',
    index: 1
  },
  {
    letter: 'c',
    index: 2
  },
  {
    letter: 'd',
    index: 3
  },
  {
    letter: 'e',
    index: 4
  },
  {
    letter: 'f',
    index: 5
  },
  {
    letter: 'g',
    index: 6
  },
  {
    letter: 'h',
    index: 7
  }
]



export default {
  name: "employeeCenter",
  components: { AdvanceTable, detailDrawer, employDetailCpt, staffBatchTmp, PageLayout },
  filters: {
    contractStatusFilter (str) {
      // switch (str) {
      //   case 'Corvidae':
      //     return '待完善'
      //   case 'Wait':
      //     return '待签署'
      //   case 'Process':
      //     return '签署中'
      //   case 'Success':
      //     return '签署成功'
      //   case 'Fail':
      //     return '签署失败'
      //   case 'Refuse':
      //     return '拒签'
      //   case 'Cancel':
      //     return '取消签署'
      //   default:
      //     return '-'
      // }

      switch (str) {
        case 'Corvidae':
          return '超期未签约'
        case 'Wait':
          return '超期未签约'
        case 'Process':
          return '超期未签约'
        case 'Success':
          return '超期未签约'
        case 'Fail':
          return '拒签'
        case 'Refuse':
          return '拒签'
        case 'Cancel':
          return '拒签'
        default:
          return '-'
      }
    },
    statusFilter (str) {
      switch (str) {
        case 'Supplement':
          return '待补充'
        case 'UnEntry':
          return '待入职'
        case 'OnJob':
          return '在职'
        case 'UnDimission':
          return '待离职'
        case 'Dimission':
          return '已离职'
        case 'Expired':
          return '已失效'
        default:
          return '-'
      }
    },
    dateFormatFilter (val) {
      return val ? transferDate(val, 0) : '-'
    },

    nameFilter (name) {
      return name.length > 4 ? name.substring(0, 4) + '...' : name
    }

  },
  data () {
    return {
      defaultSpan: 12,
      defaultSpanItem: 6,
      radioValue: 'a',
      loading: false,
      pageNum: 1,
      total: 0,
      pageSize: 10,
      columns: datas.columns,
      dataSource: [],
      conditions: {},
      btnName: '批量导出',
      radioCurrentIdx: 'a',
      searchForm: {
        nameTeldepartmentVal: '',
        corpProNameVal: undefined
      },
      tableData: [], // 全部      
      rowSelection,
      modalShow: false,
      confirmLoading: false,
      labelCol: { span: 7 },
      wrapperCol: { span: 12 },
      leaveModalForm: {
        id: '',
        userId: null,
        name: '',
        dimissionReason: undefined,
        dimissionDate: null,
        // moment(moment(), 'YYYY-MM-DD')
        // dimissionDate: moment(moment().subtract(1, "days"), 'YYYY-MM-DD'),
        socialSecurityStopDate: undefined,
        accumulationFundStopDate: undefined,
        cntDescVal: '',
      },
      setWidth: 'width: 220px',
      modalRules: {
        dimissionReason: [
          { required: true, message: '请选择离职原因', trigger: 'blur' },
        ],
        dimissionDate: [
          { required: true, message: '请选择离职日期', trigger: 'change' },
        ],
        socialSecurityStopDate: [
          { required: true, message: '请选择社保停缴月份', trigger: 'change' },
        ],
        accumulationFundStopDate: [
          { required: true, message: '请选择公积金停缴月份', trigger: 'change' },
        ],
      },
      employeeManagementTabArr: datas.employeeManagementTabArr,
      selectData: [],
      keyword: null,
      projectId: null,
      status: null,
      contractStatus: null,
      contractSignStartTime: null,
      typeSelectArr: datas.typeSelectArr,
      leaveModalReasonData: datas.leaveModalReasonData,
      isUnusual: null,
      userId: null,
      exportBtnLoading: false,
      visible: false,
      staffBatchModalConfirmLoading: false,
      unusualType: '',
      batchOption: undefined,
      batchOptionLoading: false,
      drawerVisibles: false
    };
  },
  created () {
    this.getData() // 列表接口
    this.projectGetList()
  },
  computed: {
    ...mapState('account', { currUser: 'user' }),
    ...mapState('setting', ['lang']),
  },
  methods: {
    moment,
    ...mapMutations('setting', ['setShowDrawer']),

    handleOk () {
      this.staffBatchModalConfirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.staffBatchModalConfirmLoading = false;
      }, 2000);
    },

    handleCancel (e) {
      this.visible = false;
      this.getData()
    },

    cancelDrawer () {
      // this.getData()
      // this.setShowDrawer(false)
      this.drawerVisibles = false
    },

    disabledDate (current) {
      return current > moment().endOf('day');
    },

    batchImportBtnClk () {
      this.visible = true
    },

    batchExportBtnClk () {
      let params = {
        keyword: this.searchForm.nameTeldepartmentVal,
        projectId: this.searchForm.corpProNameVal,
        contractStatus: this.contractStatus,
        contractSignStartTime: this.contractSignStartTime,
        status: this.status,
        isUnusual: this.isUnusual
      }

      this.exportBtnLoading = true
      downloadApi(params).then(res => {
        this.exportBtnLoading = false

        let { code, data, msg } = res.data
        if (code === 200) {
          window.location.href = data
        } else {
          this.$message.error(msg)
        }
      })
    },

    projectGetList () {
      projectGetListApi().then(res => {
        let { code, data, msg } = res.data

        if (code === 200) {
          let _arr = []
          if (data) {
            data.forEach(item => {
              if (item.name) {
                _arr.push(item)
              }
            })
          }
          this.selectData = _arr
        } else {
          this.$message.error(msg)
        }
      })
    },

    getData () {
      this.loading = true
      let { keyword, projectId, status, pageNum, pageSize, contractStatus, unusualType, contractSignStartTime, isUnusual } = this
      let params = {
        keyword,
        projectId,
        status,
        pageNum,
        pageSize,
        // contractStatus, // 请选择类型
        unusualType,
        isUnusual,
        contractSignStartTime
      }

      /**
       * contractStatus: 合同类型
       * contractSignStartTime: 人员异动-选择日期
       * isUnusual: 是否异动 1 是
       */

      employeeManageListApi(params).then(res => {
        this.loading = false
        let { code, data, msg } = res.data
        if (code === 200) {
          this.tableData = data.content
          this.pageNum = data.pageNum
          this.total = data.totalElements
          this.pageSize = data.pageSize
        } else {
          this.$message.error(msg)
        }
      })
    },

    radioOnChange (e) {
      this.searchForm = {}
      this.radioCurrentIdx = e.target.value;
      letterToIndex.forEach(item => {
        if (item.letter == this.radioCurrentIdx) {
          this.status = statusArr[item.index] ? statusArr[item.index] : null
        }
      })

      if (e.target.value == 'g') {
        this.isUnusual = 1
        this.defaultSpan = 12
        this.defaultSpanItem = 6
        this.columns = datas.columns1 // 切换人员异动表头
      } else {
        this.isUnusual = undefined
        this.contractStatus = undefined
        this.contractSignStartTime = undefined
        this.columns = datas.columns
      }
      this.getData()
    },

    // 是否发送离职协议
    onChange () { },

    handleChange1 (value) {
      this.searchForm.corpProNameVal = value
    },

    UnusualHandleChange (value) {
      if (value) {
        let type = value == 'one' ? 2 : 1
        // this.contractStatus = value
        this.unusualType = type
      } else {
        this.unusualType = ''
      }

    },

    leaveModalSelectOnchange (value) {
      this.leaveModalForm.dimissionReason = value
    },

    filterOption (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

    onSearch (conditions) {
      this.pageNum = 1
      this.conditions = conditions
      this.getData()
    },

    onSizeChange (current, size) {
      this.pageNum = 1
      this.pageSize = size
      this.getData()
    },

    onRefresh (conditions) {
      this.conditions = conditions
      this.getData()
    },

    onReset (conditions) {
      this.conditions = conditions
      this.getData()
    },

    onPageChange (page, pageSize) {
      this.pageNum = page
      this.pageSize = pageSize
      this.getData()
    },

    // 查询
    searchBtnClkFn () {
      let { searchForm } = this
      this.keyword = searchForm.nameTeldepartmentVal
      this.projectId = searchForm.corpProNameVal
      this.getData()
    },

    goDetails (id) {
      this.userId = id
      // this.setShowDrawer(true)
      this.drawerVisibles = true
    },

    getList () {
      this.getData() // 列表接口
    },

    quitPOsitionClkFn (data) {
      this.leaveModalForm = { ...this.leaveModalForm, ...data.record }
      this.modalShow = true
      this.$nextTick(() => {
        this.$refs['leaveModalForm'].clearValidate();
        this.$refs['leaveModalForm'].resetFields();
        this.leaveModalForm.cntDescVal = ''
      })
    },

    leaveModalHandleOk () {
      let { id, userId, cntDescVal, dimissionDate, dimissionReason, accumulationFundStopDate, socialSecurityStopDate } = this.leaveModalForm
      let params = {
        userId: userId,// 用户ID
        employeeId: id,// 雇员ID
        reason: dimissionReason,// 离职原因
        dimissionDateStr: dimissionDate,// 离职日期
        stopSocialDateStr: socialSecurityStopDate + '-01',// 停缴社保日期
        stopFundDateStr: accumulationFundStopDate + '-01',// 停缴公积金日期
        memo: cntDescVal,// 内容描述
        sendAgreement: false// 是否发送离职协议
      }

      this.$refs.leaveModalForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true;
          employeeDimissionApi(params).then(res => {
            this.modalShow = false;
            this.confirmLoading = false;

            let { code, msg } = res.data
            if (code === 200) {
              this.$message.success(msg);
            } else {
              this.$message.error(msg);
            }

          })
        } else {
          return false;
        }
      });


    },

    leaveModalHandleCancel () {
      this.modalShow = false;
      this.getData()
    },

    filterOption1 (input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

    dimissionOnchange (date, dateString) {
      this.leaveModalForm.dimissionDate = dateString
      if (!dateString) {
        this.leaveModalForm.dimissionDate = undefined
      }
    },

    socialSecurityStopDateOnchange (date, dateString) {
      this.leaveModalForm.socialSecurityStopDate = dateString
      if (!dateString) {
        this.leaveModalForm.socialSecurityStopDate = undefined
      }
    },

    stopFundDateStopDateOnchange (date, dateString) {
      this.leaveModalForm.accumulationFundStopDate = dateString
      if (!dateString) {
        this.leaveModalForm.accumulationFundStopDate = undefined
      }
    },

    batchHandleChange (value) {
      if (ids.length == 0) {
        this.$message.error('请勾选要操作的项目');
        return
      }

      if (Number(value) === 1) { // 入职              
        let params = ids
        this.entryJobPackApi(params, 'batch')
      } else { // 取消入职         
        let params = ids
        this.leaveJobPackApi(params, 'batch')
      }
    },

    // 入职接口
    entryJobPackApi (params, type) {
      this.batchOptionLoading = true
      entryByPitchApi(params).then(res => {
        this.batchOptionLoading = false
        this.getData()
        ids = []
        if (res.data.code === 200) {
          this.$message.success(type == 'batch' ? '批量入职成功' : '入职成功');
        } else {
          this.$message.error(res.data.msg)
        }
      })
    },

    // 取消入职接口
    leaveJobPackApi (params, type) {
      batchCancelEntryApi(params).then(res => {
        if (res.data.code === 200) {
          this.$message.success(type == 'batch' ? '批量取消入职成功' : '取消入职成功');
          this.getData()
        } else {
          this.$message.error(type == 'batch' ? '批量取消入职失败' : '取消入职失败');
        }
      })
    },

    // 单行入职
    entryJobClkFn (id) {
      this.entryJobPackApi(id, 'single')
    },

    // 单行取消入职
    cancelEntryJobClkFn (id) {
      this.leaveJobPackApi(id, 'single')
    },

    UnusualOnChange (date, dateString) {
      this.contractSignStartTime = dateString
    },

    cancelEntryClkFn (id) {
      this.leaveJobPackApi(id, 'single')
    },

    entryAgainClkFn (id) {
      this.entryJobPackApi(id, 'single')
    },

    againEntryFn (type) {
      switch (type) {
        case 'Fail':
          return false
        case 'Refuse':
          return false
        case 'Cancel':
          return false
        default:
          return true
      }
    },

    colorFilter (type) {
      switch (type) {
        case 'Supplement':
          return 'pink'
        case 'UnEntry':
          return 'orange'
        case 'OnJob':
          return 'blue'
        case 'UnDimission':
          return 'red'
        case 'Dimission':
          return 'red'
        case 'Expired':
          return 'red'
      }
    }
  },

};
</script>

<style scoped lang="less">
.mtb_10 {
  margin: 20px 0;
}

.pl_50 {
  padding-left: 50px;
}

.radioGroup_div {
  align-items: center;
  margin-bottom: 20px;
}

.dsp_flex {
  display: flex;
  display: -webkit-flex;
}

.wordStatistics_wrapper {
  position: relative;
  .wordStatistics {
    position: absolute;
    bottom: -30px;
    right: 0;
    line-height: 1;
  }
}
.staffModal {
  /deep/.ant-table-body {
    height: 500px;
    overflow: auto;
  }
}
.hide {
  display: none;
}
.employeeDetail_drawer {
  /deep/.ant-drawer-body {
    padding: 0;
  }
}
</style>
